<template>
  <div class="userRegister">
    <!-- 头部NavBar -->
    <div class="navBarBox">
      <NavBar title="注册" routerLink="/login">
        <div></div>
      </NavBar>
    </div>
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <!-- 昵称 -->
        <van-field
          v-model="profile.user_name"
          name="user_name"
          label="昵称"
          placeholder="昵称"
        />
        <!-- 性别 -->
        <van-field name="user_gender" label="性别">
          <template #input>
            <van-radio-group
              v-model="profile.user_gender"
              direction="horizontal"
            >
              <van-radio name="1">男</van-radio>
              <van-radio name="2">女</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <!-- 手机号 -->
        <van-field
          v-model="profile.user_mobile"
          name="user_mobile"
          label="手机号"
          placeholder="手机号"
          :rules="[{ required: true, message: '手机号格式错误' }]"
        />
        <!-- 密码 -->
        <van-field
          v-model="profile.user_password"
          name="user_password"
          label="密码"
          placeholder="请输入密码"
        />
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit">
          注册
        </van-button>
      </div>
    </van-form>
  </div>
  <!-- 地址弹出框 -->
  <PubCity changeAddr="user" v-if="store.state.user.isArea" />
</template>

<script>
import { ref, watchEffect } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import NavBar from "@/components/NavBar/NavBar.vue";
import PubCity from "@/views/Publish/PubCity.vue";
import { Register } from "@/api/user";
// import { useRouter } from "vue-router";
export default {
  name: "UserRegister",
  components: { NavBar, PubCity },
  setup() {
    // 用户信息
    const profile = ref({
      // 用户id
      user_id: "",
      // 昵称
      user_name: "",
      // 手机号
      user_mobile: "",
      // 性别
      user_gender: "1",
    });
    const store = useStore();
    const router = useRouter();
    // 选择城市
    const onHandleCity = () => {
      store.commit("user/handleIsArea");
      watchEffect(() => {
        profile.value.user_address = store.state.user.city;
      });
    };
    const onSubmit = (values) => {
      console.log("1111", values);
      Register(values).then((res) => {
        // 注册成功之后跳转到login页面
        console.log(res);
        router.push("/login");
      });
    };

    return {
      store,
      profile,
      onHandleCity,
      onSubmit,
    };
  },
};
</script>

<style lang="less" scoped>
.userRegister {
  height: 100%;
  background-color: #fff;
  // 头部NavBar
  .navbarBox {
    width: 100%;
    height: 2.6rem;
  }
  .van-form .van-cell-group {
    margin: 0;
  }
  .van-button {
    background-color: aliceblue;
    color: sandybrown;
    font-size: 1.3rem;
    letter-spacing: 9px;
  }
}
</style>
